<!--
 * @Author: zengjing
 * @Date: 2021-12-29 21:52:08
 * @LastEditTime: 2022-01-06 19:04:59
 * @LastEditors: zengjing
 * @Description: 实时数据
 * @FilePath: \briup\teamwork\briup-webUI-2group-teamwork\am-ui\src\pages\am\monitor\RealTime.vue
 * 别乱动！
-->
<template>
  <div class="realTime">
    <div class="content">
      <div class="left">
        <el-input v-model="keyWords" placeholder="请输入关键字" clearable @input="toHandler"></el-input>

        <!-- 工程设备树 -->
        <el-tree :data="edTree" :props="props" @node-click="handleNodeClick"></el-tree>
      </div>
      <div class="right">
        <div v-if="params.device_id">
          <!-- 标签页 -->
          <el-tabs v-model="activeName" @tab-click="tagHandleClick">
            <el-tab-pane label="tsp" name="tsp"></el-tab-pane>
            <el-tab-pane label="pm10" name="pm10"></el-tab-pane>
            <el-tab-pane label="pm2.5" name="pm25"></el-tab-pane>
            <el-tab-pane label="温度" name="temperature"></el-tab-pane>
            <el-tab-pane label="湿度" name="humidity"></el-tab-pane>
          </el-tabs>
          <!-- 图表容器 -->
          <div ref="realTime" id="realTime" style="height: 500px"></div>
          <!-- {{ chartData }} -->
        </div>
        <div v-else class="notice">请先选择工程下的设备</div>
      </div>
    </div>
  </div>
</template>
<script>
import { get } from '@/utils/request.js'
import moment from 'moment'
import { Line } from '@antv/g2plot'
export default {
  data() {
    return {
      list: [],
      edTree: [],
      props: {
        label: 'name',
        value: 'id'
      },
      params: {
        page: 1,
        pageSize: 50
      },
      todayData: [],
      activeName: 'tsp',
      chart: null,
      keyWords: ''
    }
  },
  computed: {
    chartData() {
      return this.todayData.map(item => {
        return {
          date: moment(item.insert_time).format('hh:mm'),
          [this.activeName]: parseInt(item[this.activeName])
        }
      })
    }
  },
  methods: {
    //模糊搜索关键字
    toHandler() {
      if (this.keyWords == '') {
        this.findEngineerDeviceTree()
      }
      this.edTree = this.edTree.filter(item => item.name.match(this.keyWords))
    },
    // 图表初始化方法
    loadCharts() {
      // 盘点图表是否存在，如果存在，销毁掉
      if (this.chart) {
        this.chart.destroy()
      } // 第一步，生成图表实例

      this.chart = new Line(this.$refs['realTime'], {
        data: this.chartData,
        padding: 'auto',
        xField: 'date',
        yField: this.activeName
      })
      //第二步绘制图表
      this.chart.render()
    },
    // tag点击回调
    tagHandleClick() {
      this.chart.update({
        data: this.chartData,
        yField: this.activeName
      })
    },
    searchHandleClick(data) {},
    // 树形节点点击事件
    handleNodeClick(data) {
      this.list = data.engineer_id
      // 判断用户点击的是否是设备，点击工程时不查询数据
      if (data.engineer_id) {
        this.params = {
          ...this.params,
          engineer_id: data.engineer_id,
          device_id: data.id
        }
        // 调用请求数据的方法
        this.queryTodayData()
      }
    },
    // 查询工程设备树
    findEngineerDeviceTree() {
      get('/engineer/findEngineerDeviceTree').then(res => {
        this.edTree = res.data
      })
    },
    // 根据工程设备ID检索当天设备数据
    queryTodayData() {
      get('/monitor/pageQueryTodayData', this.params).then(res => {
        this.todayData = res.data.list
        // 调用初始化图表的方法
        this.loadCharts()
      })
    }
  },
  created() {
    // 查询工程设备树
    this.findEngineerDeviceTree()
  }
}
</script>
<style scoped>
.content {
  display: flex;
}
.left {
  width: 30%;
  border-right: 1px solid #b9b7b7;
  padding-right: 20px;
  margin-right: 20px;
}
.right {
  width: 70%;
}
.notice {
  height: 500px;
  line-height: 500px;
  text-align: center;
  font-size: 30px;
  color: #999;
}
</style>